<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创世纪元辅助CreateBy_伍仟蚊</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
    <link rel="stylesheet" href="css/custom.css"/>
    <link href="css/autocomplete.css" type="text/css" rel="stylesheet" />

    <!-- <script type="text/javascript" src="prettify.js"></script> -->
    
    <!-- jQuery includes -->
    <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> -->
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jqueryui/1.8.16/jquery-ui.min.js"></script> -->
    <script type="text/javascript" src="jquery.linq.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <script type="text/javascript" src="items.js"></script>
    
    <script src="jquery.jOrgChart.js"></script>

    <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : false
        });
    });
    </script>
    <style>
        body{
            color: #000;
        }
        a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        a:hover{
            color: #fff;
        }
        .jOrgChart .node {
            width: 120px;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            margin: 0 8px;
        }
        .nav li{
            padding: 4px 10px 0;
        }
        .autocomplete-suggestions {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px solid #999;
            background: #fff;
            cursor: default;
            overflow: auto;
            -webkit-box-shadow: 1px 4px 3px rgba(50,50,50,.64);
            -moz-box-shadow: 1px 4px 3px rgba(50,50,50,.64);
            box-shadow: 1px 4px 3px rgba(50,50,50,.64)
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden
        }

        .autocomplete-no-suggestion {
            padding: 2px 5px
        }

        .autocomplete-selected {
            background: #d0d0d0
        }

        .autocomplete-suggestions strong {
            font-weight: 700;
            color: #000
        }

        .autocomplete-group {
            padding: 2px 5px
        }

        .autocomplete-group strong {
            font-weight: 700;
            font-size: 16px;
            color: #000;
            display: block;
            border-bottom: 1px solid #000
        }

        input:placeholder {
            color: #ddd;
        }

    </style>
  </head>

  <body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="container">
                <a class="brand" href="#">游戏物品路径</a>
                <ul class="nav"> 
                    <li>
                        <input type="text" id="autocomplete" placeholder="请输入物品名称" />
                    </li>
                </ul>
                <div class="pull-right">
                    <div class="alert-message info" id="show-list">CreateBy_伍仟蚊</div>     
                </div>              
            </div>
        </div>
    </div>
    
<!--显示组织架构图-->
<div id='jOrgChart'></div>


<script type='text/javascript'>
    // $(function(){
    //     //数据返回
    //     $.ajax({
    //         url: "test.json",
    //         type: 'GET',
    //         dataType: 'JSON',
    //         data: {action: 'org_select'},
    //         success: function(result){
    //             var showlist = $("<ul id='org' style='display:none'></ul>");
    //             showall(result.data, showlist);
    //             $("#jOrgChart").append(showlist);
    //             $("#org").jOrgChart( {
    //                 chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
    //                 dragAndDrop : false //设置是否可拖动
    //             });

    //         }
    //     });
    // });


    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens.length > 0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+' '+val.number+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+' '+val.number+"</a>").appendTo(parent);
            }
        });

    }
    function getchild(node,pid,number){
        if(!node.childrens){
            return {
                "id": node.id,
                "name": node.name,
                "pid": pid,
                "number": number,
                "childrens": []
            };
        }
        else{
            var ret={
                "id": node.id,
                "name": node.name,
                "pid": pid,
                "number": number,
                "childrens": []
            };
            $.each(node.childrens,function(i,c){
                var tmpItem=jQuery.Enumerable.From(items).Where(function (x) { return x.name == c.name }).FirstOrDefault();
                if(tmpItem){
                    ret.childrens.push(getchild(tmpItem,node.id,c.number*number));
                }
            });
            return ret;
        }
    }
    $(function() {
        'use strict';
        // var queryResult = jQuery.Enumerable.From(items)
        //     //.Where(function (x) { return x.user.id < 200 })
        //     .OrderByDescending(function (x) { return x.type })
        //     .Select(function (x) { return x })
        //     .ToArray();
        //var queryResult=jQuery.Enumerable.From(items).OrderBy("c=>c.type").ThenBy("c=>c.id").ToArray();
        var listAll;
        $.each(typeCategory,function(i,c){
            var query=jQuery.Enumerable.From(items).Where(function (x) { return x.type == c.id })
            .Select(function (x) { 
                return  {
                    value:x.name,
                    data:{
                        category: c.name
                    },
                    id: x.id,
                    type: x.type
                }
            })
            .ToArray();
            if(!listAll){
                listAll=query
            }
            else{
                listAll=listAll.concat(query);
            }
        });
        $('#autocomplete').devbridgeAutocomplete({
            lookup: listAll,
            minChars: 1,
            onSelect: function(suggestion) {
                //$('#selection').html('You selected: ' + suggestion.value + ', ' + suggestion.data.category);
                var node=jQuery.Enumerable.From(items).Where(function (x) { return x.name == suggestion.value }).FirstOrDefault();
                if(node){
                    node = getchild(node,null,1);
                }
                var nodelist=[node];
                var showlist = $("<ul id='org' style='display:none'></ul>");
                showall(nodelist, showlist);
                $("#jOrgChart").empty();
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop : false //设置是否可拖动
                }); 
            },
            showNoSuggestionNotice: true,
            noSuggestionNotice: '匹配内容失败!',
            groupBy: 'category'
        });
    });
</script>
</body>
</html>